<template>
  <div class="person">
    <h1>名字：{{ name }}</h1>
    <h1>年龄：{{ age }}</h1>
    <h1>年龄2：{{ x }}</h1>
    <button @click="changeName">修改名字</button>
    <button @click="ageAdd">年龄+1</button>
  </div>
</template>

<script lang="ts" setup name="Person999">

import { reactive, toRefs, toRef } from "vue";

let person = reactive({
  name: '张三',
  age: 19
})

//加了toRefs 就是把 reactive 变成 ref 定义的
// toRefs 是一次性全部解构，toRef 是指定解构哪个
let { name, age } = toRefs(person)
let x = toRef(person, 'age')


function changeName() {
  name.value = '哇哈哈'
}

function ageAdd() {
  age.value += 1
}

</script>

<style lang="scss" scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  color: white;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>
